<template>
	<view class="container">
		<div class="make-an-appointment">
			<view class="header-title">
				<view style="padding: 40rpx;box-sizing: border-box;">
					<u--input placeholder="搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="searchValue" @change='$u.debounce(searchChange, 1000)'></u--input>
				</view>
				<!-- <button @click="callback">打开设置页</button> -->
				<!-- <view class="h-title">选择分院</view>
				<view class="span-title">
					<view class="left-box">当前城市：北京</view>
					<view class="right-box">
						<span>切换城市</span>
						<view style="margin-top: 3rpx;"><u-icon name="arrow-right" color="#2979ff" size="12"></u-icon>
						</view>
					</view>
				</view> -->
			</view>
			<view class="list-content">
				<view class="content-box" v-for='(item,index) in copylist' :key='item.storeId'
					@click="branchCourtListClick(item)">
					<view class="img-box">
						<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
					</view>
					<view class="right-content-box">
						<view class="h-title">
							<view>{{item.storeName}}</view>
							<view style="font-size: 24rpx;">评分：{{item.score?item.score:0}}</view>
						</view>
						<view class="time-text">营业时间 {{item.businessStartTime}} - {{item.businessEndTime}}</view>
						<view class="time-text"> 距离：{{item.distance}}</view>
						<view class="frequency-text">服务人次：{{item.serviceNum }}</view>
						<view class="address-text">
							{{item.address}}
							<!-- <view style="margin-left: 20rpx;">
								{{item.distance}} <u-icon name="map" color="#2979ff" size="14"></u-icon>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import {
		storeList
	} from '@/api/axios/MakeAnAppointmentCenter.js'
	import store from "@/store/index.js"
	export default {
		name: 'MallCenter',
		data() {
			return {
				list: [],
				copylist: [],
				searchValue: ''
			}
		},
		created() {
			let _this = this
			let mapData = store.state.mapData
			let localCoordinate = ''
			if (mapData.location) {
				localCoordinate = mapData.location.lng + ',' + mapData.location.lat
			}
			storeList({
				params: {
					storeName: '',
					localCoordinate: localCoordinate
				}
			}).then((res) => {
				console.log(res);
				_this.list = res
				_this.copylist = res
			})
			// wx.getFuzzyLocation({
			// 	type: 'wgs84',
			// 	success(res) {
			// 		const latitude = res.latitude
			// 		const longitude = res.longitude
			// 		console.log(res);
			// 	}
			// })
			// console.log('---------------------------------------------');
			// wx.getLocation({
			// 	type: 'wgs84',
			// 	success(res) {
			// 		const latitude = res.latitude
			// 		const longitude = res.longitude
			// 		const speed = res.speed
			// 		const accuracy = res.accuracy
			// 	}
			// })
			// console.log('---------------------------------------------');
		},
		methods: {
			branchCourtListClick(data) {
				this.$emit('MListShow', false)
				uni.navigateTo({
					url: '/pages-makeAnAppointmentCenter/BranchCourtList/index' + uni.$u.queryParams(data)
				})
			},
			searchChange(e) {
				this.copylist = this.list.filter(item => {
					if (item.storeName.indexOf(this.searchValue) >= 0) {
						return item
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	@import 'index.scss'
</style>